<template>
    <div>
        <el-card>
            <el-row>
                <el-col :span="12">
                    <el-form :model="configList[0]" style="margin: 20px;" ref="ruleFormRef">
                        <el-form-item label="三人斗地主:">
                        </el-form-item>
                        <el-form-item label="报名费:" prop="serve">
                            <el-input v-model="configList[0].serve" placeholder="" clearable></el-input>
                        </el-form-item>

                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form :model="configList[1]" style="margin: 20px;" ref="ruleFormRef">
                        <el-form-item label="三人尖子顶:">
                        </el-form-item>
                        <el-form-item label="报名费:" prop="serve">
                            <el-input v-model="configList[1].serve" placeholder=""></el-input>
                        </el-form-item>
                     

                    </el-form>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form :model="configList[2]" style="margin: 20px;" ref="ruleFormRef">
                        <el-form-item label="大众二人麻将:">
                        </el-form-item>
                        <el-form-item label="报名费:" prop="serve">
                            <el-input v-model="configList[2].serve" placeholder="" clearable></el-input>
                        </el-form-item>
                     
                    </el-form>
                </el-col>
                
            </el-row>

            <div style="text-align:center">
                <el-button type="primary" @click="submitForm(ruleFormRef)">修改提交</el-button>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Logger } from '@/engine/util/Logger'
import { DateUtil } from '@/engine/util/DateUtil'
import { HttpClient } from '@/utils/HttpClient'
import { nextTick, onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { UIHelper } from '@/utils/UIHelper'
import { da } from 'element-plus/es/locale'
const ruleFormRef = ref<FormInstance>()

const loading = ref(true)
const activeName = ref("first")
const appContainer = ref(null)

let configList = reactive([
    {
        "gameType":2,
        "renshu": 3,
        "serve": 1,
    },
    {
        "gameType":3,
        "renshu": 3,
        "serve": 1,
    },
    {
        "gameType":6,
        "renshu": 2,
        "serve": 1,
    },
   
])



onMounted(() => {
    nextTick(() => {
        // let data = appContainer.value.
    })
    setTimeout(() => {
        loading.value = false
    }, 500)
    HttpClient.get_system_setting("matchconfig", (data: string) => {
        Logger.log("jinbichang===", data)
        if(data){
            let dataList: Array<object> = JSON.parse(data)
            for (let i = 0; i < dataList.length; i++) {
                configList[i].gameType = dataList[i]["gameType"]
                configList[i].serve = dataList[i]["serve"]
                configList[i].renshu = dataList[i]["renshu"]
            }
        }
    })
})

const submitForm = async (formEl: FormInstance | undefined) => {
    // 正整数正则
    Logger.log("configList==", configList)
    let posPattern = /^\d+$/;
    for (let i = 0; i < configList.length; i++) {
        let obj = configList[i]
        obj.serve = parseInt(obj.serve + "")
        if (!posPattern.test(obj.serve + '')) {
            UIHelper.showMsg("服务费必须全为正整数")
            return
        }
    }
    let value: string = JSON.stringify(configList)
    HttpClient.update_system_setting("matchconfig", value, () => {
        UIHelper.showMsg("修改成功")
    })
}





</script>
      
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
      